import React, { forwardRef, useImperativeHandle } from "react";
import { IForm } from "@/components";
import type { FormItemConfig } from "@/components/FormItem";
import { RecordDetail } from "@/views/AuthManage/ResourceManage/type";
import { Form, message } from "antd";
import { roleTypeMap } from "@/utils/consts";

interface Props {
	selRecord?: RecordDetail;
}

const ResourceForm = forwardRef((props: Props, ref) => {
	const [form] = Form.useForm();
	const detail = props.selRecord;

	useImperativeHandle(ref, () => ({
		validateFields: () => {
			return form
				.validateFields()
				.then(value => {
					return {
						...value
						// accountExpire: formatDateShowTime(value.accountExpire),
					};
				})
				.catch((error: any) => {
					// message.warn("请完善用户基本信息");
					throw error;
				});
		}
	}));

	const formItemsConfig: FormItemConfig[] = [
		{
			type: "resourceTreeSelect",
			formItemProps: {
				name: "parentId",
				label: "上级菜单",
				initialValue: detail?.parentId,
				rules: [{ required: true }]
			},
			childProps: {}
		},
		{
			type: "select",
			formItemProps: {
				name: "menuType",
				label: "菜单类型",
				initialValue: detail?.menuType,
				rules: [{ required: true }]
			},
			childProps: {
				options: [
					{ label: "目录", value: 1 },
					{ label: "菜单", value: 2 },
					{ label: "按钮", value: 3 }
				]
			}
		},
		{
			type: "input",
			formItemProps: {
				name: "menuName",
				label: "菜单名称",
				initialValue: detail?.menuName,
				rules: [{ required: true }, { max: 50 }]
			}
		},
		{
			type: "input",
			formItemProps: {
				name: "url",
				label: "请求地址",
				initialValue: detail?.url
				// rules: [{ required: true }, { max: 50 }]
			}
		},
		{
			type: "input",
			formItemProps: {
				name: "perms",
				label: "资源点",
				initialValue: detail?.perms,
				rules: [{ required: true }, { max: 50 }]
			}
		},
		{
			type: "input",
			formItemProps: {
				name: "sorted",
				label: "显示排序",
				initialValue: detail?.sorted,
				rules: [{ required: true }]
			}
		},
		{
			type: "input",
			formItemProps: {
				name: "icon",
				label: "图标",
				initialValue: detail?.icon
				// rules: [{ required: true }, { max: 50 }]
			}
		},
		{
			type: "roleTypeSelect",
			formItemProps: {
				label: "角色类型",
				name: "roleTypeList",
				initialValue: detail?.roleTypeList,
				rules: [{ required: true }]
			},
			childProps: {
				mode: "multiple",
				options: [
					{ label: '管理角色', value: roleTypeMap.managerRole },
					{ label: '平台角色', value: roleTypeMap.platformRole },
					{ label: '用户角色', value: roleTypeMap.enterpriseRole },
				],
				onChange(value: number[]) {
					// queryResources(value);
					// queryInitialResources(value)
				}
			}
		}
	];

	return (
		<div>
			<IForm layout="vertical" form={form} formItemsConfig={formItemsConfig}></IForm>
		</div>
	);
});

export default ResourceForm;
